<template>
    <div class="index">
        <div><el-button type="primary" @click="printEv" plain>打印</el-button></div>
        <div style="background-color: aliceblue" id="preview_content"></div>
    </div>
</template>
  
<script >
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import panelcode from '@/utlis/printTemplate/panel01.js'
import panelcode02 from '@/utlis/printTemplate/panel02.js'

export default {
    name: 'componentName',
    components: {},
    data() {
        return {
            murmur: null,
            htmlData: null,
            // 标签打印
            hiprintTemplatecode: new hiprint.PrintTemplate({ template: panelcode }),
            hiprintTemplatecode01: new hiprint.PrintTemplate({ template: panelcode02 }),
            printDatacode: [{ "title": "XX有限公司固定资产管理卡", "assetname": "xx资产名称", "spc": "硅胶SA00001", "docno":"123456", "dd": "2023-10-12" ,"mingpai":"奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪","biaoqianhao":"BQ_3546","shiwuname":"电脑","dep_name":"财务部" ,"weizhi":"G01B1栋二楼大办公室","rem":"***说明","code":"a000123" }],
        }
    },
    async mounted() {
        window.addEventListener('afterprint', this.handlePrint)
        hiprint.init({
            providers: [defaultElementTypeProvider()],
        });
        // this.yulanEv()
    },
    methods: {
        print() {
            window.print(); // 调用浏览器的打印功能
        },
        handlePrint() {
            console.log('打印完成');
            // 在这里可以执行一些打印完成后的操作
        },
        async routerEv(ev) {
            this.$router.push(ev)
        },
        printEv() {
            this.hiprintTemplatecode01.print(this.printDatacode)
        },
        async yulanEv() {
            console.log('预览');

            // hiprintTemplate.toPdf({}, "导出pdf");
            // 预览
            $('#preview_content').html(hiprintTemplate.getHtml())
            // this.htmlData = hiprintTemplate.getHtml();
            // console.log(this.htmlData);
        }

    }
}
</script>
  
<style lang='less' scoped>
.index {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    // background-color: red;
}
</style>